     * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
     }

     body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background: linear-gradient(135deg, #090a0d, #0f1014);
        color: #f1f1f1;
        min-height: 100%;
        overflow-x: hidden;
        padding: 0;
        background-attachment: fixed;
        line-height: 1.6;
        font-size: 16px;
     }

     /* 几何装饰背景 */
     body::before {
         content: "";
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background:
             radial-gradient(circle at 10% 20%, rgba(108, 92, 231, 0.1) 0%, transparent 20%),
             radial-gradient(circle at 90% 80%, rgba(255, 118, 117, 0.1) 0%, transparent 20%),
             radial-gradient(circle at 50% 30%, rgba(9, 206, 201, 0.05) 0%, transparent 30%);
         z-index: -1;
     }

     /* 网格线条背景 */
     body::after {
         content: "";
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background-image:
             linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
             linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
         background-size: 40px 40px;
         z-index: -1;
     }

     /* 导航栏 */
     header {
         background: rgba(15, 16, 20, 0.85);
         border-bottom: 1px solid rgba(108, 92, 231, 0.3);
         box-shadow: 0 0 15px rgba(108, 92, 231, 0.2);
         position: fixed;
         width: 100%;
         top: 0;
         z-index: 1000;
         backdrop-filter: blur(10px);
     }

     .nav-container {
         max-width: 1200px;
         margin: 0 auto;
         padding: 24px 32px;
         overflow: hidden;
         /*清除浮动*/
     }

     .logo {
         float: left;
     }

     .logo-icon {
         font-size: 32px;
         color: #00cec9;
         margin-right: 12px;
         text-shadow: 0 0 15px rgba(0, 206, 201, 0.7);
         display: inline-block;
         vertical-align: middle;
     }

     .logo-text {
         font-family: 'Arial Black', sans-serif;
         font-size: 28px;
         font-weight: bold;
         letter-spacing: 1px;
         background: linear-gradient(45deg, #6c5ce7, #00cec9);
         -webkit-background-clip: text;
         background-clip: text;
         -webkit-text-fill-color: transparent;
         text-shadow: 0 0 15px rgba(108, 92, 231, 0.3);
         display: inline-block;
         vertical-align: middle;
     }

     .nav-links {
         float: right;
         list-style: none;
         margin-top: 8px;
     }

     .nav-links li {
         display: inline-block;
         margin-left: 32px;
     }

     .nav-links a {
         color: #f1f1f1;
         text-decoration: none;
         font-weight: 500;
         position: relative;
         padding: 8px 0;
         letter-spacing: 0.8px;
         font-size: 18px;
     }

     .nav-links a::after {
         content: '';
         position: absolute;
         bottom: 0;
         left: 0;
         width: 0;
         height: 2px;
         background: #ff7675;
         transition: width 0.4s ease;
     }

     .nav-links a:hover::after {
         width: 100%;
     }

     .hero {
         padding: 128px 32px 80px;
         text-align: center;
         max-width: 800px;
         margin: 0 auto;
         clear: both;
         /*消除浮动影响*/
     }

     .hero h1 {
         font-family: 'Impact', 'Arial Black', sans-serif;
         font-size: 56px;
         margin-bottom: 16px;
         letter-spacing: 3.2px;
         text-transform: uppercase;
         background: linear-gradient(to right, #f1f1f1, #00cec9);
         -webkit-background-clip: text;
         background-clip: text;
         -webkit-text-fill-color: transparent;
         text-shadow: 0 0 15px rgba(0, 206, 201, 0.3);
     }

     .hero p {
         font-size: 20px;
         color: #b2bec3;
         max-width: 600px;
         margin: 0 auto;
     }

     .hero-divider {
         height: 3px;
         width: 150px;
         background: linear-gradient(to right, #090a0d, #6c5ce7, #00cec9, #090a0d);
         margin: 32px auto;
         border-radius: 3px;
     }

     /* 博客网格 - 内网块元素实现 */
     .blog-grid {
         max-width: 1200px;
         margin: 0 auto;
         padding: 32px;
         text-align: center;
         font-size: 0;
     }

     .post-card {
         background: linear-gradient(145deg, rgba(24, 25, 31, 0.8), rgba(15, 16, 20, 0.9));
         border-radius: 12px;
         overflow: hidden;
         box-shadow:
             0 10px 20px rgba(0, 0, 0, 0.3),
             inset 0 0 1px 1px rgba(255, 255, 255, 0.05);
         transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale(1);
         transition: all 0.4s ease;
         position: relative;
         z-index: 1;
         display: inline-block;
         vertical-align: top;
         width: 32%;
         margin: 10px 0.666%;
         /*相当于32px总间距*/
         box-sizing: border-box;
     }

      .post-card::before {
          content: "";
          position: absolute;
          top: -2px;
          left: -2px;
          right: -2px;
          bottom: -2px;
          background: linear-gradient(45deg, #6c5ce7, #00cec9, #ff7675, #6c5ce7);
          background-size: 400%;
          z-index: -1;
          border-radius: 14px;
          animation: gradientFlow 20s linear infinite;
          opacity: 0.7;
      }

      @keyframes gradientFlow {
          0% {
              background-position: 0% 50%;
           }
          50% {
               background-position: 100% 50%;
           }
          100% {
               background-position: 0% 50%;
               }
      }

      .post-image {
          height: 200px;
          width: 100%;
          overflow: hidden;
          position: relative;
      }

      .post-image img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 1s ease;
      }

      .post-card:hover .post-image img {
          transform: scale(1.05);
      }

      .post-content {
          padding: 25px;
      }

      .post-meta {
          margin-bottom: 15px;
          font-size: 14px;
          color: #b2bec3;
          text-align: left;
          overflow: hidden;
          /*清除浮动*/
      }

      .post-author {
          color: #00cec9;
          float: left;
      }

      .post-date {
          float: right;
      }

      .post-date::before {
          content: "|";
          margin: 0 10px;
      }

      .post-tags {
          margin-top: 10px;
          text-align: left;
      }

      .tag {
         padding: 5px 12px;
         font-size: 12px;
         border-radius: 20px;
         margin-right: 8px;
         margin-bottom: 8px;
         background: rgba(108, 92, 231, 0.15);
         color: #6c5ce7;
         border: 1px solid rgba(108, 92, 231, 0.3);
         display: inline-block;
      }

      .tag:nth-child(2n) {
          background: rgba(0, 206, 201, 0.15);
          color: #00cec9;
          border-color: rgba(0, 206, 201, 0.3);
      }

      .tag:nth-child(3n) {
          background: rgba(255, 118, 117, 0.15);
          color: #ff7675;
          border-color: rgba(255, 118, 117, 0.3);
      }

      .post-card h2 {
          font-family: 'Arial Black', sans-serif;
          font-size: 24px;
          margin-bottom: 15px;
          letter-spacing: 0.8px;
          line-height: 1.3;
          text-align: left;
          clear: both;
          /*清除上方浮动*/
      }

      .post-card h2 a {
          color: #f1f1f1;
          text-decoration: none;
          position: relative;
      }

      .post-card h2 a::after {
          content: '';
          position: absolute;
          bottom: -5px;
          left: 0;
          width: 50px;
          height: 3px;
          background: #ff7675;
          transition: width 0.4s ease;
      }

      .post-card:hover h2 a::after {
      width: 100px;
      }

      .post-excerpt {
          color: #b2bec3;
          font-size: 16px;
          line-height: 1.7;
          margin-bottom: 20px;
          text-align: left;
      }

      .read-more {
      /*display: inline-block;*/
          color: #f1f1f1;
          text-decoration: none;
          font-weight: 600;
          position: relative;
          padding: 5px 0;
          letter-spacing: 0.8px;
          font-size: 16px;
          margin-top: 10px;
          text-align: left;
          float: left;
      }

      .read-more::after {
          content: "→";
          margin-left: 8px;
          position: relative;
          top: 1px;
          transition: transform 0.4s ease;
      }

      .post-card:hover .read-more::after {
          transform: translateX(5px);
      }

      .read-more::before {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 0;
          height: 1px;
          background: #00cec9;
          transition: width 0.4s ease;
      }

      .post-card:hover .read-more::before {
          width: 100%;
      }

      /* 页脚 */
      footer {
          background: rgba(9, 10, 13, 0.9);
          margin-top: 80px;
          padding: 48px 32px;
          border-top: 1px solid rgba(108, 92, 231, 0.3);
          position: relative;
          clear: both;
      }

      .footer-content {
          max-width: 1200px;
          margin: 0 auto;
          overflow: hidden;
          /*清除浮动*/
      }

      .footer-section {
          width: 33.33%;
          float: left;
          padding: 0 15px;
          box-sizing: border-box;
      }

      .footer-section h3 {
          font-family: 'Arial Black', sans-serif;
          margin-bottom: 24px;
          letter-spacing: 1.6px;
          font-size: 22px;
          color: #00cec9;
          position: relative;
          padding-bottom: 8px;
      }

      .footer-section h3::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 50px;
          height: 2px;
          background: #ff7675;
      }

       .footer-section p {
           color: #b2bec3;
           font-size: 16px;
           line-height: 1.7;
           margin-bottom: 20px;
       }

       .footer-links {
           list-style: none;
       }

       .footer-links li {
           margin-bottom: 12px;
       }

       .footer-links a {
           color: #b2bec3;
           text-decoration: none;
           display: inline-block;
           transition: all 0.4s ease;
           font-size: 16px;
       }

       .footer-links a:hover {
           color: #00cec9;
           transform: translateX(5px);
       }

       .footer-links i {
           margin-right: 10px;
           width: 20px;
       }

       .footer-bottom {
           max-width: 1200px;
           margin: 0 auto;
           text-align: center;
           padding-top: 32px;
           border-top: 1px solid rgba(255, 255, 255, 0.05);
           color: #b2bec3;
           clear: both;
           font-size: 16px;
       }